<template>
  <div>
    <ul>
      <li :style="color">
        <span v-show="false">{{ bianColor}}</span> 
       {{ title }}
        <input type="button" @click="removes" value="移除" />
      </li>
    </ul>
  </div>
</template>


<script>
let colorLists = [
  {
    color: "red",
  },
  {
    color: "green",
  },
  {
    color: "aqua",
  },
  {
    color: "black",
  },
  {
    color: "blue",
  },
  {
    color: "brown",
  },
  {
    color: "deeppink",
  },
  {
    color: "yellow",
  },
];

export default {
  props: {
    id: {
      type: Number,
    },
    title: {
      type: String,
    },
    bianColor: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ran: 0,
      color: "",
      dclock: "",
    };
  },
  methods: {
    removes() {
      //发射remove事件
      this.$emit("remove");
    },
  },
  beforeUpdate() {
    this.dclock = this.bianColor;
    if (this.dclock) {
      //清除上一个定时器
      clearInterval(this.timer);

      console.log("我进来了");

       //重启加载定时器
      this.timer = setInterval(() => {
        let { ran } = this;
        // 获取一个0-1的随机数
        ran = Math.ceil(Math.random() * colorLists.length - 1);
        this.ran = ran;
        this.color = colorLists[this.ran];
      }, 500);
    } else {
      clearInterval(this.timer);
      console.log("我结束了");
    }
  },
};
</script>



<style>
</style>